<script setup>
defineProps({
  tipTitle: {
    type: String,
    required: false,
    default: '',
  },
  tipText: {
    type: String,
    required: false,
    default: '',
  },
  cancelText: {
    type: String,
    required: false,
    default: '取消',
  },
  confirmText: {
    type: String,
    required: false,
    default: '确认',
  },
  isTwoBtn: {
    type: Boolean,
    required: false,
    default: true,
  },
  styles: {
    type: Object,
    required: false,
    default: () => ({}),
  },
})
const emits = defineEmits(['confirm', 'cancel'])
// 按钮统一做防抖
let timeoutId = null
const confirm = () => {
  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    emits('confirm')
  }, 500)
}
</script>

<template>
  <div :class="['p_confirm', tipTitle.length > 0 ? 'p_confirm_has_title' : 'p_confirm_no_title']" :style="{...styles}">
    <div v-if="tipTitle.length > 0" class="tip_title">{{ tipTitle }}</div>
    <div class="tip">
      <slot name="tip">{{ tipText }}</slot>
    </div>
    <div v-if="isTwoBtn" class="flex_sb_start">
      <slot name="twoBtn">
        <div class="no" @tap.stop="emits('cancel')">
          <span class="cancel_text">{{ cancelText }}</span>
        </div>
        <div class="ok" @tap.stop="confirm">
          <span class="confirm_text">{{ confirmText }}</span>
        </div>
      </slot>
    </div>
    <div v-else class="flex_cen_cen">
      <slot name="oneBtn">
        <div class="one_btn" @tap.stop="emits('confirm')">{{ confirmText }}</div>
      </slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.p_confirm_no_title {
  padding: 60rpx 40rpx 56rpx;
}
.p_confirm_has_title {
  padding: 40rpx;
}
.p_confirm {
  width: 520rpx;
  background: #FFFFFF;
  border-radius: 48rpx;
  .tip_title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 32rpx;
  }
  .tip {
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #202021;
    margin-bottom: 56rpx;
  }
  .no, .ok {
    width: 210rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    border-radius: 80rpx;
    border: 2rpx solid #DBDDE0;
    .cancel_text {
      font-size: 32rpx;
      font-weight: 400;
      color: #202021;
    }
  }
  .ok {
    background: #1890FF;
    border: none;
    .confirm_text {
      color: #FFFFFF;
    }
  }
  .one_btn {
    width: 440rpx;
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    background: #1890FF;
    border-radius: 80rpx;
  }
}
</style>
